<template>
    <div class="navTop" ref="navTop">
        <div class="topmenu">
            <div class="container">
                <a href="#">
                    <img class="logo" :src='require("@/assets/imgs/logo.png")' alt="">
                </a>
                <div class="menu_top" ref="menu_top">
                    <div class="menu_logo">
                        <img class="logo" :src='require("@/assets/imgs/logo.png")' alt="">
                        <b @click="closeMeun">&#10006;</b>
                    </div>
                    <ul class="ul_menu">
                        <router-link class="menu_item" tag="li" :to="{name:'首页'}">首页</router-link>
                        <!-- <li></li> -->
                        <li class="menu_item">猿分享<i class="iconfont icon-jiantou"></i>
                            <ul class="dropdown_menu">
                                <li class="dropdown_menu_item" v-for="(item, index) in menuList" :key="index"  @click="getClassDetails(item)">{{item.classname}}</li>
                            </ul>
                        </li>
                        <li class="menu_item">笔记生态圈</li>
                        <li class="menu_item"><i class="iconfont icon-sousuo"></i>Search</li>
                        <li class="menu_item" v-if="userinfo.userName">Hello!{{userinfo.userName}}<i class="iconfont icon-jiantou"></i>
                            <ul class="dropdown_menu">
                                <!-- <router-link :to="{name:'管理后台'}" tag="li" class="dropdown_menu_item">管理后台</router-link> -->
                                <li class="dropdown_menu_item">会员中心</li>
                                <li class="dropdown_menu_item" @click="logoutLogin">注销登录</li>
                            </ul>
                        </li>
                    </ul>
                    <div class="userlogin" v-if="!userinfo.userName">
                        <router-link :to="{name:'登录'}" tag="a">登录</router-link>
                        <b>or</b>
                        <router-link :to="{name:'注册'}" tag="a">注册</router-link>
                        <i class="icon_png" :style="{backgroundImage:'url('+require('@/assets/imgs/up-new-iocn.png')+')'}"></i>
                    </div>
                </div>
                <div class="menu_png" @click="showMenu"><img :src="require('@/assets/imgs/menu.png')" alt=""></div>
            </div>
        </div>
        <div class="banner" :style="{backgroundImage:'url('+require('@/assets/imgs/banner.jpg')+')'}">

        </div>
    </div>
</template>
<script>
import { mapMutations } from 'Vuex';
import { logoutLogin} from "api/auto"
import {getClassMenu} from "api/article"
export default {
    data(){
        return {
            menuList:[]
        }
    },
    computed:{
        userinfo(){
            return this.$store.state.userinfo
        }
    },
    methods:{
        ...mapMutations([ 'saveUserInfo', 'saveClassinfo'] ),
        showMenu(){
            this.$refs.menu_top.style="transform: scale(1)";
        },
        closeMeun(){
            this.$refs.menu_top.style="transform: scale(0)";
        },
        logoutLogin(){
            logoutLogin().then(res=>{
                if(res.code==0){
                    this.saveUserInfo({});
                }
            })
        },
        getClassDetails(row){
            this.$router.push({name:'首页'})
            this.saveClassinfo(row);
        },
        _getClassMenu(){
            getClassMenu().then(res=>{
                console.log(res.data);
                this.menuList = res.data
            });
        }
    },
    mounted(){
        this._getClassMenu();
    }
}
</script>
<style lang="scss" scoped>
ul{
    list-style: none;
}

@media screen and (min-width: 1025px){
    .menu_logo{
        display: none !important;
    }
    .menu_top{
        transform: scale(1) !important;
    }
}
@media screen and (max-width: 1025px){
    .menu_top{
        transform: scale(0);
        position: absolute;
        top: 0px;
        right: 0px;
        left: 0px;
        z-index: 99;
        flex-direction: column;
        align-items: flex-start !important;
        background: #fff;
        padding-bottom: 18px;
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1);
        li{
            color: #172b4d!important;
        }
        .userlogin{
            margin-left: 0.35rem;
        }
        .menu_logo{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 0.25rem 0.25rem;
            border-bottom: 1px solid #eee;
            b{
                font-size: 18px;
            }
        }
    }
    .dropdown_menu{
        position: static !important;
        display: none;
        width: 100% !important;
    }
    .menu_item:hover .dropdown_menu{
        display: block;
        .dropdown_menu_item{
            width: 100% !important;
        }
    }
    .menu_png{
        display: block !important;
    }
    .container{
        width: 100% !important;
    }
    .topmenu{
        padding: 0.4rem 1rem !important;
    }
    .ul_menu {
        width: 100%;
        flex-direction: column;
    }
}
@media screen and (max-width: 450px){
    .menu_logo img{
        height: 35px !important;
    }
    .topmenu{
        padding: 0.2rem 0.2rem !important;
        .ul_menu{
            padding: 0.15rem 0rem !important;
            .menu_item{
                padding: 0.25rem 0.35rem !important;
            }
        }
    }
    .menu_item:hover .dropdown_menu:before{
        display: none;
        
    }
    
    .banner{
        height: 400px!important;
        background-size:100% 100%; 
    }
    .banner::after{
        height: 50px !important;
    }
}


    .topmenu{
        position: absolute;
        z-index: 100;
        top: 0;
        width: 100%;
        border: 0;
        background-color: transparent;
        // background-color: #172b4d!important;
        box-shadow: none;
        padding: 0.7rem 1rem;
        transition: all 1s;
    }
    .container{
        position: relative;
        width: 63%;
        margin: 0 auto;
        transition: all 1s;
        img.logo{
            height: 45px;
        }
    }
    .menu_png{
        float: right;
        display: none;
        cursor: pointer;
        img{
            width: 50px;
            height: 45px;
        }
    }
     
    .menu_top{
        display: flex;
        align-items: center;
        float: right;
        justify-content: flex-end;
        transition: all 0.39s;
    }
    .ul_menu{
        display: flex;
        .menu_item{
            position: relative;
            padding: .35rem;
            color: #fff;
            font-weight: bold;
            border-radius:5px ;
            background:  transparent;
            cursor: pointer;
            margin-right: 12px; 
            transition:all 0.2s;
            i{
                font-size: 10px;
                padding: 0 5px; 
            }
        }
        .menu_item:hover{
            background: rgba(255,255,255, 0.3)
        }
        .menu_item:hover .dropdown_menu{
            opacity: 1;
            top: 1rem;
            transform: scaleX(1)
        }
        .dropdown_menu{
            opacity: 0;
            transform: scaleX(0);
            position: absolute;
            min-width: 3.45rem;
            max-width: 100%;
            width: 0px;
            top: 1rem;
            left: 0;
            background: #fff;
            padding: 0.2rem 0;
            border-radius:5px; 
            transition: all 0.4s;
            .dropdown_menu_item{
                line-height: 0.8rem;
                color: #172b4d;
                padding: 0 0.3rem;
                transition: all 0.3s;
            }
            .dropdown_menu_item:hover{
                background: rgba(221, 236, 229, 0.88)
            }
        }
        .dropdown_menu:before{
            display: block;
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            top:-8px;
            left: 25px;
            transform: rotateZ(45deg);
            background: #fff;
        }
    }
    .userlogin{
        position: relative;
        padding: 0.125rem 0;
        a{
            padding: 0.125rem 0.25rem;
            border-radius:5px;
            background: #81c483!important;
            color: #fff;
            font-weight: bold;
        }
        b{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left:-10px; 
            margin-top:-10px; 
            display: block;
            width: 20px;
            height: 20px;
            text-align: center;
            color: #81c483;
            background: #fff;
            border: 0.04rem solid #eee;
            border-radius: 50%; 
        }
        i.icon_png{
            position: absolute;
            top: -7px;
            right: -51px;
            display: block;
            width: 54px;
            height: 34px;
            background-repeat: no-repeat;
        }
    }
    .banner{
        position: relative;
        height: 380px;
        background-position: center center;
        background-size: cover;
        background-repeat:no-repeat; 
        overflow: hidden;
        transition: all 0.5s;
    }
    .banner::before{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 10;
        background: -webkit-linear-gradient(135deg,rgba(221, 236, 229, 0.88) 0,rgba(95, 47, 210, 0.31) 100%);
    }
    .banner::after{
        content: "";
        position: absolute;
        display: block;
        left: -10px;
        right: -10px;
        bottom: -40px;
        height: 80px;
        background: #fff;
        z-index: 88;
        transform: rotateZ(-2.2deg);
        transition: all 1s;
    }
    
    
</style>


